<template>
  <view>
    <view class="text-bold ">
      {{ title }}
    </view>
    <view class="text-gray ">
      {{ desc }}
    </view>
    <view class="flex  flex-sub justify-between">
      <view v-for="(item,index) in options" :key="index"
            class="flex flex-sub" @click="select(item,index)">
        <view v-if="selectIndex===index||curValue===item.value" class="flex flex-sub padding shadow bg-cyan margin-xs radius justify-center">
          {{ item.label }}
        </view>
        <view v-else class="flex flex-sub padding shadow bg-cyan light margin-xs radius justify-center">
          {{ item.label }}
        </view>
      </view>
    </view>
    <view v-if="selectItem&&selectItem.isInput" class="bg-gray margin-xs padding radius-lg">
      <input v-model="curValue" placeholder="请输入"/>
    </view>
  </view>
</template>

<script setup lang="ts">

import {computed, defineEmits, defineProps, ref} from "vue";

const props = defineProps({
  title: {
    type: String,
    default: '标题',
  },
  desc: {
    type: String,
    default: '描述',
  },
  options: {
    type: Array,
    default: [
      {
        label: '是',
        value: '是',
        isInput: true,
      },
      {
        label: '否',
        value: '否',
        isInput: false,
      }
    ]
  },
  value: {
    type: String,
    default: '',
  }
})
const emits = defineEmits(['update:value'])
const curValue = computed({
  set(value) {
    emits('update:value', value)
  },
  get() {
    return props.value
  }
})
const selectItem = ref()
const selectIndex = ref()
const select = (item: any, index: any) => {
  selectItem.value = item
  selectIndex.value = index
  curValue.value = selectItem.value.value
}

</script>

<style scoped>

</style>